<template>
  <div class='add_box'>
    <!--面包屑-->
    <Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
    <div class="add_content">
      <div class="banner">
        <h2>资料内容</h2>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="标题:" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入档案名称" style="margin-left:-20px"></el-input>
          </el-form-item>
          <el-form-item label="年份:">
            <el-date-picker
              v-model="ruleForm.year"
              type="year"
              placeholder="请选择年份"
              style="margin-left:-20px">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div class="box1">
          <div class="a">公司简介：</div>
          <div class="text"> 
            <quill-editor v-model="ruleForm.content"/>
          </div>
        </div>
      </div>
      <!-- 问题清单附件 -->
      <div class="item_wrap">
        <div class="title_wrap hasbutton">
          <div class="left">
            <div class="line"></div>
            <div class="title">问题清单附件</div>
            <div class="note">支持PDF、PPT、mp4、avi、jpg、png、jpeg格式文件</div>
          </div>
          <el-upload action :auto-upload="false" :file-list="fileList" :on-change="handleChange" :show-file-list="false">
            <el-button>上传文件</el-button>
          </el-upload>
        </div>
        <div v-if="fileList.length == 0" class="note">暂无附件</div>
        <div v-else class="fileList">
          <div class='fileItem' v-for="(item, index) in fileList" :key="index">
            <div :class='item.type'></div>
            <div class='right'>
              <div class='title' :title='item.name'>{{item.name}}</div>
              <div class='fileOpt'>
                <div class='fileSize'>{{(item.size / 1024 / 1024).toFixed(2) + "M"}}</div>
                <div class='optBtn'>
                  <div class='btnOne' @click='view(index)'>
                    <div class='oneImg'></div>
                    <div class='oneTxt'>预览</div>
                  </div>
                  <div class="done">|</div>
                  <div class='btnTwo' @click='upload(index)'>
                    <div class='twoImg'></div>
                    <div class='twoTxt'>下载</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 问题清单附件 -->
    </div>
    <div class="footer">
      <el-button class="button" @click='cancel'>取消</el-button>
      <el-button type="primary" class="button" @click='preservation'>保存</el-button>
    </div>
  </div>
</template>

<script>
//面包靴
import Breadcrumb from "@/components/IncorruptibleArchives/Breadcrumb.vue";
// import BaiduMap from "vue-baidu-map/components/map/Map.vue";
export default {
  components: {
    Breadcrumb,
    // BaiduMap,
  },
  data() {
    return {
      fileList: [],
      ruleForm: {
        name: '',
        year: '',
        content:''
      },
      rules: {
        name: [
          { required: true, message: '请选择', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请输入档案名称', trigger: 'blur' }
        ],
      },
      //面包靴跳转数据
      Breadcrumb: [
        {
          name: "廉政档案",
          link: "IncorruptibleArchives",
        },
        {
          name: "公司档案",
          link: "archives",
        },
        {
          name: "公司档案详情",
          link: "Detail",
        },
        {
          name: "新增档案列表",
          link: "AddArchives",
        },
      ],
    };
  },
  mounted() {
    if(this.$route.query.orgId){
      this.getInfo()
    }else{
      this.ruleForm.orgId = this.$route.query.id
      this.ruleForm.type = this.$route.query.type
      this.ruleForm.name = this.$route.query.name
    }
  },
  methods: {
    getInfo(){
      let paramsJson ={
        id: this.$route.query.orgId
      }
      this.Api.archiveDetail(paramsJson).then((res) => {
        if (res.code == 0) {
          this.ruleForm.orgId = res.data.id
          this.ruleForm.type = res.data.type
          this.ruleForm.name = res.data.title
          this.ruleForm.year = res.data.year
          this.ruleForm.content = res.data.content
          this.fileList = res.data.attachList.map(item => {
            let testmsg = item.name.substring(item.name.lastIndexOf('.') + 1).toLowerCase()
            let type = '';
            switch(testmsg){
              case 'pdf':
                type = 'leftPdf'
                break;
              case 'ppt':
                type = 'leftPpt'
                break;
              case 'mp4':
                type = 'leftMp4'
                break;
              case 'avi':
                type = 'leftAvi'
                break;
              case 'jpg':
                type = 'leftImg'
                break;
              case 'png':
                type = 'leftImg'
                break;
              case 'jpeg':
                type = 'leftImg'
                break;
            }
            item.type = type
            return item
          })
        }
      })
    },
    view(index){
      this.fileUrl = this.fileList[index].url
      this.baseUrl = this.$store.state.PortalManagement.fileIp
      this.fileUrl = this.baseUrl + this.fileList[index].url
      window.open(this.fileUrl)
    },
    upload(index){
      this.fileUrl = this.fileList[index].url;
      this.Api.download(this.fileUrl).then((res) => {
        let url = window.URL.createObjectURL(new Blob([res],{ type:'text/plain'}))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download',this.fileList[index].name)
        document.body.appendChild(link)
        link.click()
      })
    },
    handleChange(file) {
      console.log(file);
      let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase()
      const extension =
          testmsg === 'pdf' ||
          testmsg === 'ppt' ||
          testmsg === 'mp4' ||
          testmsg === 'avi' ||
          testmsg === 'jpg' ||
          testmsg === 'png' ||
          testmsg === 'jpeg'
      if (!extension) {
          this.$message.error('上传文件格式不正确')
      }else{
        const formData = new FormData()
        formData.append("multipartFile", file.raw)
        this.Api.uploadFile(formData).then((res) => {
          let type = '';
          switch(testmsg){
            case 'pdf':
              type = 'leftPdf'
              break;
            case 'ppt':
              type = 'leftPpt'
              break;
            case 'mp4':
              type = 'leftMp4'
              break;
            case 'avi':
              type = 'leftAvi'
              break;
            case 'jpg':
              type = 'leftImg'
              break;
            case 'png':
              type = 'leftImg'
              break;
            case 'jpeg':
              type = 'leftImg'
              break;
          }
          this.fileList.push({
              name: res.data.fileName,
              size: file.size,
              url: res.data.url,
              type:type
          })
          let rowFile = JSON.stringify(this.fileList)
          window.sessionStorage.setItem("rowFile", rowFile)
        });
      }
    },
    preservation(){
      if(this.$route.query.orgId){
        let paramsJson = {
          attachList:this.fileList,
          id:this.ruleForm.orgId,
          type:this.ruleForm.type,
          title:this.ruleForm.name,
          year:this.ruleForm.year,
          content:this.ruleForm.content
        }
        this.Api.archiveEdit(paramsJson).then((res) => {
          if (res.code == 0) {
            this.$router.go(-1)
          }
        })
      }else{
        let paramsJson = {
          attachList:this.fileList,
          orgId:this.ruleForm.orgId,
          type:this.ruleForm.type,
          title:this.ruleForm.name,
          year:this.ruleForm.year,
          content:this.ruleForm.content
        }
        this.Api.archiveAdd(paramsJson).then((res) => {
          if (res.code == 0) {
            this.$router.go(-1)
          }
        })
      }
    },
    cancel(){
      this.$router.go(-1)
      // this.$router.push('/index/IncorruptibleArchives/archives/Detail')
    }
  },
};
</script>

<style lang="less" scoped>
.add_box{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.add_content{
  width: 100%;
  height: calc(100% - 132px);
  padding-bottom: 200px;
  overflow: auto;
}
.banner {
  width: 100%;
  min-height: 606px;
  background: white;
  padding: 20px ;
  box-sizing: border-box;
}
.pic {
  width: 100px;
  height: 100px;
}
.pic img {
  width: 100px;
  height: 100px;
}
.companyName h3 {
  font-size: 30px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 30px;
  margin: 20px 0;
}
.box1 {
  margin-top: 20px;
  display: flex;
}
.text {
  width: 1418px;
  height: 100px;
}
.a {
    width:80px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 36px;
}

/deep/.el-input__inner {
    height: 36px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width:320px;
}
.box{
  margin-top: 20px;
    width: 100%;
    display: flex;
    align-items: center;
}
/deep/.ql-container {
    box-sizing: border-box;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    width: 1350px;
    height: 320px;
    margin: 0px;
    position: relative;
}
/deep/.ql-toolbar.ql-snow {
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    padding: 8px;
    width: 1350px;
}
/deep/.el-form-item__label {
       text-align:right;
       width: 54px;
       margin-left: -22px;
}
/deep/.el-icon-date:before {
    content: "\e78e";
    margin-left: 292px;
}
h2 {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    line-height: 16px;
    border-left: 4px solid #3d7fff;
    padding: 0 0 0 10px;
    margin-bottom: 39px;
}
.item_wrap {
  background-color: #fff;
  padding: 20px;
  margin-top: 20px;
  .title_wrap {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .line {
      width: 4px;
      height: 14px;
      background: #3d7fff;
    }
    .title {
      font-weight: 500;
      margin: 0 10px;
      font-size: 16px;
      color: #333;
    }
  }
  .content_wrap {
    display: flex;
    .item {
      display: flex;
      align-items: center;
      margin-right: 60px;
      .name {
        font-style: 14px;
        font-weight: 500;
        color: #333;
        margin-right: 10px;
      }
      .el-select,
      .el-input {
        width: 320px;
        // height: 36px;
      }
    }
  }
}
.hasbutton {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
  }
  .el-button {
    width: 70px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(61, 127, 255, 1);
    border-radius: 4px;
    text-align: center;
    line-height: 30px;
    color: #3d7fff;
  }
}
.note {
  font-size: 14px;
  color: #999;
}
.classInput {
  /deep/.el-input__inner {
    text-align: center;
  }
}
.done {
  margin: 0 10px;
}
.time {
  display: flex;
  align-items: center;
}

.button_wrap {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 100px;
  right: 0;
  z-index: 99;
  text-align: right;
  padding: 10px 20px;
  .el-button {
    margin-left: 10px;
  }
}
.fileList {
  overflow: hidden;
  .fileItem{
    float: left;
    width: 360px;
    height: 80px;
    border-radius: 4px;
    border: 1px solid rgba(221, 221, 221, 1);
    margin-right: 20px;
    margin-bottom: 20px;
    padding: 15px;
    display: flex;
    .leftPdf{
      width: 50px;
      height: 50px;
      background:url(../../../../assets/image/pdf.png) no-repeat;
      background-size: 100%;
    }
    .leftImg{
      width: 50px;
      height: 50px;
      background:url(../../../../assets/image/file_img.png) no-repeat;
      background-size: 100%;
    }
    .leftPpt{
      width: 50px;
      height: 50px;
      background:url(../../../../assets/image/file_ppt.png) no-repeat;
      background-size: 100%;
    }
    .leftMp4{
      width: 50px;
      height: 50px;
      background:url(../../../../assets/image/file_video.png) no-repeat;
      background-size: 100%;
    }
    .leftAvi{
      width: 50px;
      height: 50px;
      background:url(../../../../assets/image/file_music.png) no-repeat;
      background-size: 100%;
    }
    .right{
      margin-left: 15px;
      width: 244px;
      height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 14px;
      .title {
        font-size: 16px;
        color: #333;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        margin-bottom: 10px;
      }
      .fileOpt{
        display: flex;
        justify-content: space-between;
        .fileSize{
          color: #999;
        }
        .optBtn{
          display: flex;
          justify-content: space-around;
          color: #3d7fff;
          .btnOne{
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            .oneImg{
              margin-right: 2px;
              width: 16px;
              height: 12px;
              background:url(../../../../assets/image/preview.png) no-repeat;
              background-size: contain;
            }
          }
          .btnTwo{
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            .twoImg{
              margin-right: 2px;
              width: 16px;
              height: 12px;
              background:url(../../../../assets/image/download.png) no-repeat;
              background-size: contain;
            }
          }
        }
      }
    }
  }
  
}
.footer{
  margin-top: 20px;
  width: 100%;
  height: 56px;
  background-color: #fff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.button{
    width: 70px;
    height: 36px;
    margin-right: 20px;
}
</style>